<template>
	<div class="ele-body">
		<el-card shadow="never">
			<!-- 搜索表单 -->
			<el-form :model="table.where" label-width="77px" class="ele-form-search" @keyup.enter.native="$refs.table.reload()" @submit.native.prevent>
				<el-row :gutter="15">
					<el-col :md="6" :sm="12">
						<el-form-item label="名称:"><el-input v-model="table.where.dataname" placeholder="请输入" clearable /></el-form-item>
					</el-col>
					<el-col :md="6" :sm="12">
						<el-form-item label="所属功能:"><el-input v-model="table.where.module" placeholder="请输入" clearable /></el-form-item>
					</el-col>
					<el-col :md="6" :sm="12">
						<div class="ele-form-actions">
							<el-button type="primary" @click="$refs.table.reload()" icon="el-icon-search" class="ele-btn-icon">查询</el-button>
							<el-button @click="(table.where = {}) && $refs.table.reload()">重置</el-button>
						</div>
					</el-col>
				</el-row>
			</el-form>
			<!-- 操作按钮 -->
			<div class="ele-table-tool ele-table-tool-default">
				<el-button @click="showEdit = true" type="primary" icon="el-icon-plus" class="ele-btn-icon" size="mini">添加</el-button>
				<el-button @click="remove()" type="danger" icon="el-icon-delete" class="ele-btn-icon" size="mini">删除</el-button>
			</div>
			<!-- 数据表格 -->
			<ele-data-table ref="table" :config="table" :choose.sync="choose" highlight-current-row>
				<template slot-scope="{ index }">
					<el-table-column type="selection" width="45" align="center" fixed="left" />
					<el-table-column type="index" :index="index" width="45" align="center" fixed="left" show-overflow-tooltip />
					<el-table-column prop="dataname" label="名称" sortable="custom" show-overflow-tooltip min-width="110" />
					<el-table-column prop="module" label="所属功能" sortable="custom" show-overflow-tooltip min-width="110" />
					<el-table-column prop="datasql" label="sql脚本" sortable="custom" show-overflow-tooltip="true" min-width="180" />
					<el-table-column prop="ispage" label="分页" width="75px" sortable="custom" :resizable="false">
						<template slot-scope="{ row }">
							<el-switch v-model="row.ispage" @change="editIspage(row)" :active-value="1" :inactive-value="0" />
						</template>
					</el-table-column>
					<el-table-column prop="state" label="状态" width="75px" sortable="custom" :resizable="false">
						<template slot-scope="{ row }">
							<el-switch v-model="row.state" @change="editState(row)" :active-value="0" :inactive-value="1" />
						</template>
					</el-table-column>
					<el-table-column label="创建时间" sortable="custom" show-overflow-tooltip min-width="110">
						<template slot-scope="{ row }">
							{{ row.createtime | toDateString }}
						</template>
					</el-table-column>
					<el-table-column label="操作" width="200px" align="center" :resizable="false">
						<template slot-scope="{ row }">
							<el-link @click="edit(row)" icon="el-icon-edit" type="primary" :underline="false">修改</el-link>
							<el-popconfirm title="确定要删除此记录吗？" @confirm="remove(row)" class="ele-action">
								<el-link slot="reference" icon="el-icon-delete" type="danger" :underline="false">删除</el-link>
							</el-popconfirm>
							<el-link @click="view(row)" icon="el-icon-view" type="primary" :underline="false">查看</el-link>
						</template>
					</el-table-column>
				</template>
			</ele-data-table>
		</el-card>
		<!-- 编辑弹窗 -->
		<el-dialog
			:title="editForm.id ? '修改' : '添加'"
			:visible.sync="showEdit"
			width="680px"
			@closed="editForm = {}"
			:destroy-on-close="true"
			custom-class="ele-dialog-form"
			:lock-scroll="false"
			:close-on-click-modal="false"
		>
			<el-form :model="editForm" ref="editForm" :rules="editRules" label-width="82px">
				<el-form-item label="名称:" prop="dataname"><el-input v-model="editForm.dataname" placeholder="请输入" clearable /></el-form-item>
				<el-form-item label="所属功能:" prop="module"><el-input v-model="editForm.module" placeholder="请输入" clearable /></el-form-item>
				<el-form-item label="sql脚本:" prop="datasql"><el-input v-model="editForm.datasql" placeholder="请输入" :rows="12" type="textarea" /></el-form-item>
			</el-form>
			<div slot="footer">
				<el-button @click="showEdit = false">取消</el-button>
				<el-button type="primary" @click="save">保存</el-button>
			</div>
		</el-dialog>
		<!-- 编辑器弹窗 -->
		<el-dialog title="演示数据" :visible.sync="showDialog" width="671px">
			<div>{{ value2 }}</div>
			<!-- <tinymce-editor v-model="value2" :init="option2" /> -->
		</el-dialog>
	</div>
</template>

<script>
// import TinymceEditor from '@/components/TinymceEditor';

export default {
	name: 'DataEngine',
	// components: { TinymceEditor },
	data() {
		return {
			value2: '',
			showDialog: false,

			table: { url: '/sys/dataengine/page', where: {} }, // 表格配置
			choose: [], // 表格选中数据
			showEdit: false, // 是否显示表单弹窗
			editForm: {}, // 表单数据
			editRules: {
				// 表单验证规则
				dataname: [{ required: true, message: '请输入名称', trigger: 'blur' }],
				module: [{ required: true, message: '请输入所属功能', trigger: 'blur' }],
				datasql: [{ required: true, message: '请输入sql语句', trigger: 'blur' }]
			}
		};
	},
	computed: {
		// option2() {
		// 	return {
		// 		menubar: false,
		// 		file_picker_callback: this.file_picker_callback,
		// 		skin_url: this.$store.state.theme.theme === 'dark' ? '/tinymce/skins/ui/oxide-dark' : '/tinymce/skins/ui/oxide',
		// 		content_css: this.$store.state.theme.theme === 'dark' ? '/tinymce/skins/content/dark/content.css' : '/tinymce/skins/content/default/content.css'
		// 	};
		// }
	},
	methods: {
		/* 查看 */
		view(row) {
			console.log(row.datasql);
			this.showDialog = true;

			const loading = this.$loading({ lock: true });
			this.$http
				.post('/sys/dataengine/view?id=' + row.id)
				.then(res => {
					loading.close();
					if (res.data.code === 0) {
						this.$message({ type: 'success', message: res.data.msg });
					} else {
						this.$message.error(res.data.msg);
					}
					this.value2 = res.data.data; //改成动态显示数据列
				})
				.catch(e => {
					loading.close();
					this.$message.error(e.message);
				});
		},
		/* 显示编辑 */
		edit(row) {
			this.editForm = Object.assign({}, row);
			this.showEdit = true;
		},
		/* 保存编辑 */
		save() {
			this.$refs['editForm'].validate(valid => {
				if (valid) {
					const loading = this.$loading({ lock: true });
					const posturl = this.editForm.id ? '/sys/dataengine/update' : '/sys/dataengine/add';

					this.$http
						.post(posturl, this.editForm)
						.then(res => {
							loading.close();
							if (res.data.code === 0) {
								this.showEdit = false;
								this.$message({ type: 'success', message: res.data.msg });
								this.$refs.table.reload();
							} else {
								this.$message.error(res.data.msg);
							}
						})
						.catch(e => {
							loading.close();
							this.$message.error(e.message);
						});
				} else {
					return false;
				}
			});
		},
		/* 删除 */
		remove(row) {
			if (!row) {
				// 批量删除
				if (this.choose.length === 0) return this.$message.error('请至少选择一条数据');
				let ids = this.choose.map(d => d.id);
				this.$confirm('确定要删除选中的记录吗?', '提示', { type: 'warning' })
					.then(() => {
						const loading = this.$loading({ lock: true });
						this.$http
							.post('/sys/dataengine/removeBatch', { ids: ids })
							.then(res => {
								loading.close();
								if (res.data.code === 0) {
									this.$message({ type: 'success', message: res.data.msg });
									this.$refs.table.reload();
								} else {
									this.$message.error(res.data.msg);
								}
							})
							.catch(e => {
								loading.close();
								this.$message.error(e.message);
							});
					})
					.catch(() => 0);
			} else {
				// 单个删除
				const loading = this.$loading({ lock: true });
				this.$http
					.post('/sys/dataengine/remove?id=' + row.id)
					.then(res => {
						loading.close();
						if (res.data.code === 0) {
							this.$message({ type: 'success', message: res.data.msg });
							this.$refs.table.reload();
						} else {
							this.$message.error(res.data.msg);
						}
					})
					.catch(e => {
						loading.close();
						this.$message.error(e.message);
					});
			}
		},
		/* 更改状态 */
		editState(row) {
			const loading = this.$loading({ lock: true });
			this.$http
				.post('/sys/dataengine/state', { id: row.id, state: row.state })
				.then(res => {
					loading.close();
					if (res.data.code === 0) {
						this.$message({ type: 'success', message: res.data.msg });
					} else {
						row.state = !row.state ? 1 : 0;
						this.$message.error(res.data.msg);
					}
				})
				.catch(e => {
					loading.close();
					this.$message.error(e.message);
				});
		}
	}
};
</script>

<style scoped>
.ele-block >>> .el-upload,
.ele-block >>> .el-upload-dragger {
	width: 100%;
}
</style>
